<template>
  <div class="bodys">
    <Header :headerTxt="$t('ws_transition.Details')" :showBack="false"></Header>
    <div class="main">
      <div class="left">
        <div>
          <span class="typein" @click="changtype">{{$t('ws_transition.buy')}}</span>
          <img
            src="../../assets/mine/buyIn.png"
            @click="changtype"
            v-show="sellout == 1"
            class="buy"
          />
          <img
            src="../../assets/mine/buygray.png"
            @click="changtype"
            v-show="sellout == 2"
            class="buy"
          />
          <span class="typeout" @click="changtypes">{{$t('ws_transition.sell')}}</span>
          <img
            src="../../assets/mine/sellOut.png"
            @click="changtypes"
            v-show="sellout == 1"
            class="sell"
          />
          <img
            src="../../assets/mine/sellred.png"
            @click="changtype"
            v-show="sellout == 2"
            class="buy"
          />
        </div>
        <div>
          <span v-show="sellout == 1">{{$t('ws_transition.buyQ')}}</span>
          <span v-show="sellout == 2">{{$t('ws_transition.sellQ')}}</span>
          <el-input-number
            class="name"
            v-model="num"
            v-show="sellout == 1"
            @change="handleChange"
            :min="10"
            :max="999999999"
            label
          ></el-input-number>
          <el-input-number
            class="name"
            v-model="num1"
            v-show="sellout == 2"
            @change="handleChange"
            :min="0"
            :max="num2"
            label
          ></el-input-number>
        </div>
        <div>
          <el-button
            style="background:#009944;color:#fff"
            v-show="sellout == 1"
            @click="gobuy"
          >{{$t('ws_transition.buy')}}</el-button>
          <el-button
            style="background:#CB4848;color:#fff"
            v-show="sellout == 2"
            @click="gosell"
          >{{$t('ws_transition.sell')}}</el-button>
        </div>
      </div>
      <div class="right">
        <!-- <div>
            <span>累计发行：1000万</span>
        </div>
         <div>
            <span>剩余数量：1000万</span>
        </div>-->
        <div>
          <span>{{$t('ws_transition.current')}}：{{num2}}</span>
        </div>
      </div>
    </div>
    <div class="msg">
      <span>{{$t('ws_transition.zhuyi')}}</span>
      <br />
      <span v-show="sellout == 2">{{$t('ws_transition.zhuyi1')}}</span>
    </div>
    <div id="myChart" ref="myChart" :style="{width: '100%', height: '300px'}"></div>
  </div>
</template>
<script>
import Header from "@/components/Header";
import echarts from "echarts";
import { hold } from "@/api/getData";
export default {
  data() {
    return {
      sellout: 1,
      num: 1,
      num1: "",
      num2: "",
      user: JSON.parse(sessionStorage.getItem("user")),
      input: "",
      datas: {
        legendData: ["自由操作", "BOSS基金", "娱乐购物", "交易佣金"],
        seriesData:[],
        seriesDataCn: [
          { name: "自由操作", value: 7 },
          { name: "BOSS基金", value: 1 },
          { name: "娱乐购物", value: 1 },
          { name: "交易佣金", value: 1 }
        ],
        seriesDataEn: [
          { name: "Free operation", value: 7 },
          { name: "BOSS Fund", value: 1 },
          { name: "Entertainment shopping", value: 1 },
          { name: "Trading commissions", value: 1 }
        ]
      },
      data: {}
    };
  },
  methods: {
    handleChange(value) {},
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.myChart);
      if(localStorage.lang == 'cn'){
        this.datas.seriesData = this.datas.seriesDataCn
      }else{
        this.datas.seriesData = this.datas.seriesDataEn
      }
      // 绘制图表
      myChart.setOption({
        title: {
          text: this.$t("ws_transition.incom"),
          subtext: "",
          x: "left",
          top: 20
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [
          {
            name: this.$t("ws_transition.incom"),
            type: "pie",
            radius: "45%",
            center: ["46%", "44%"],
            color: ["#23A784", "#FF9D28", "#DB4B4B", "#EAEA39"],
            data: this.datas.seriesData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    },
    changtype() {
      this.sellout = 1;
    },
    changtypes() {
      this.sellout = 2;
    },
    hold() {
      let data = {
        user_id: this.user.user_id
      };
      hold(data).then(res => {
        this.num1 = res.data.result.account;
        this.num2 = res.data.result.account;
      });
    },
    gobuy() {
      this.$router.push("/buyin?count=" + this.num);
    },
    gosell() {
      if (this.num1 > 0) {
        this.$router.push("/sellout?count=" + this.num1);
      } else {
        if (localStorage.lang == "cn") {
          this.$message({
            type: "error",
            message: "提现金额不能小于零！",
            duration: 1500,
            showClose: true
          });
        } else {
          this.$message({
            type: "error",
            message: "The amount of cash raised cannot be less than zero!",
            duration: 1500,
            showClose: true
          });
        }
      }
    }
  },
  components: {
    Header
  },
  mounted() {
    
    // this.hold();
    this.drawLine();
  },
};
</script>
<style lang="stylus" scoped>
* {
  margin: 0;
  padding: 0;
}

.bodys {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  background: #F8F8FF;
  font-size: 0.27rem;
}

.bodys {
  .ptitle {
    margin-top: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 7vh;
    text-indent: 0.2rem;

    span {
      font-size: 0.3rem;
      margin-right: 0.2rem;
      color: green;
    }

    .spanName {
      font-size: 0.3rem;
      color: #000;
    }
  }
}

.main {
  text-align: center;
  background: #fff;
  width: 100vw;
  display: flex;

  .typein {
    position: absolute;
    margin-left: 0.6rem;
    margin-top: 0.07rem;
    color: #fff;
    font-weight: 600;
  }

  .typeout {
    position: absolute;
    margin-left: 0.6rem;
    margin-top: 0.07rem;
    color: #fff;
    font-weight: 600;
  }
}

.left {
  margin: 1.5rem auto 0.2rem auto;
  background: #fff;
  width: 51vw;

  .tradetype {
    margin-left: 0.2rem;
  }

  img {
    width: 23vw;
    margin-bottom: 0.3rem;
  }

  .buy {
    margin-left: 1vw;
  }

  .name {
    margin-left: 0.2rem;
    width: 33vw;
    display: inline-block;
    height: 3vh;
    margin-bottom: 0.4rem;
    margin-top: 0.2rem;
  }

  >p {
    width: 0.2rem;
    height: 0.2rem;
    border: 2px solid green;
    border-radius: 10px;
    display: inline-block;
  }

  .bottom {
    border: none;
    margin-top: 0.5rem;
    width: 50vw;
    display: flex;
    justify-content: space-between;
    text-indent: 0.2rem;
  }
}

.msg {
  margin: 3vh;
  color: #9999;
}

.right {
  margin: 1.5rem auto 0.2rem auto;

  >div {
    height: 6vh;
    text-align: left;
  }
}

.el-button {
  margin-top: 0.3rem;
  margin-left: 0rem;
  width: 48vw;
  height: 5vh;
}

#myChart {
  margin-top: 0.2rem;
  background: #fff;
  canvas: 100vw;
}
</style>
<style>
.el-input-number__decrease,
.el-input-number__increase {
  width: 30px;
}
.el-input-number .el-input__inner {
  padding-left: 0px;
  padding-right: 0px;
}
</style>

